<template>
  <div class="wrap">
    <div class="form-item">
      <p class="label">充值币种</p>
      <p class="value">USDT</p>
    </div>
    <div class="form-item">
      <p class="label">充币网络</p>
      <p class="value">TRC20</p>
    </div>
    <div class="form-item">
      <p class="label">充值金额</p>
      <input type="number" v-model="amount" placeholder="请输入提币金额" placeholder-class="phod" />
    </div>
    <button class="submit" @click="submit">提交</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { walletPw } from '@/api/index.js';
  const amount = ref();

  const submit = () => {
    if (amount.value <= 0) {
      alert('输入正确金额');
      return false;
    }
    walletPw({
      amount: amount.value,
      type: 1,
    }).then((res) => {
      window.location.href = res.data.url;
    });
  };
</script>

<style lang="scss" scoped>
  .wrap {
    background: #1c1e22;
    height: 100vh;
    overflow-y: scroll;
  }
  .form-item {
    width: 90%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #999ca052;
    .label {
      color: #fff;
      font-size: 16px;
    }
    .value {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }
    input {
      display: block;
      flex: 2;
      text-align: right;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      background: #1c1e22;
      border: none;
      outline: none;
    }
    .phod {
      font-weight: normal;
      color: #fff;
      font-size: 12px;
    }
  }
  .submit {
    color: #fff;
    background-color: #1d803ab3;
    background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
    height: 2.75rem;
    width: 90%;
    margin: 1.25rem auto 0;
    display: block;
  }

  .right {
    display: flex;
    margin-right: 32px;

    image {
      display: block;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    p {
      color: #181d29;
      font-weight: 500;
      font-size: 32px;
    }
  }
</style>
